﻿<!DOCTYPE html>
<html>
<head>
    <title>Menu - Events</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.menu.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.menu.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
            .controller("appCtrl", ["$scope", "$timeout", "IntegralUIMenuService", function($scope, $timeout, $menuService){
                $scope.menuName = "menuSample";
                $scope.defaultIcon = 'icons-medium empty';
                $scope.data = [];
                $scope.menuEnabled = true;

                var flatList = [
                    { "id": 1, "text": "File", "icon": "" },
                    { "id": 11, "pid": 1, "text": "New", "icon": "icons-medium new-document" },
                    { "id": 111, "pid": 11, "text": "Project", "icon": "" },
                    { "id": 112, "pid": 11, "text": "Window", "icon": "" },
                    { "id": 12, "pid": 1, "text": "Open" },
                    { "id": 13, "pid": 1, "text": "Save As...", "icon": "icons-medium save" },
                    { "id": 14, "pid": 1, "text": "Save All" },
                    { "id": 15, "pid": 1, "type": "separator" },
                    { "id": 16, "pid": 1, "text": "Page Setup" },
                    { "id": 17, "pid": 1, "text": "Print", "icon": "icons-medium print" },
                    { "id": 18, "pid": 1, "type": "separator" },
                    { "id": 19, "pid": 1, "text": "Exit" },
                    { "id": 2, "text": "Edit", "icon": "" },
                    { "id": 21, "pid": 2, "text": "Undo" },
                    { "id": 22, "pid": 2, "text": "Redo" },
                    { "id": 23, "pid": 2, "type": "separator" },
                    { "id": 24, "pid": 2, "text": "Cut" },
                    { "id": 25, "pid": 2, "text": "Copy", "icon": "icons-medium copy" },
                    { "id": 26, "pid": 2, "text": "Paste" },
                    { "id": 27, "pid": 2, "text": "Delete", "icon": "icons-medium delete-document" },
                    { "id": 3, "text": "View", "icon": "" },
                    { "id": 31, "pid": 3, "text": "Print Layout" },
                    { "id": 32, "pid": 3, "text": "Zoom", "icon": "icons-medium zoom" },
                    { "id": 321, "pid": 32, "text": "Zoom In", "icon": "icons-medium zoom-in" },
                    { "id": 322, "pid": 32, "text": "Zoom Out", "icon": "icons-medium zoom-out" },
                    { "id": 323, "pid": 32, "type": "separator" },
                    { "id": 324, "pid": 32, "text": "Restore" },
                    { "id": 33, "pid": 3, "type": "separator" },
                    { "id": 34, "pid": 3, "text": "Full Screen" },
                    { "id": 4, "text": "Help", "icon": "" },
                    { "id": 41, "pid": 4, "text": "Search", "icon": "" },
                    { "id": 42, "pid": 4, "text": "Documents", "icon": "" },
                    { "id": 43, "pid": 4, "type": "separator", "icon": "" },
                    { "id": 44, "pid": 4, "text": "About", "icon": "" }
                ];

                var initTimer = $timeout(function(){
                    $menuService.loadData($scope.menuName, flatList);
                    $menuService.updateLayout($scope.menuName);
                }, 1);
				
                $scope.eventLog = [];
                
                $scope.onClose = function(e){
                    $scope.eventLog.unshift({ name: "close", info: " event was fired when sub-menu is closing for menu item: ", value: e.item ? e.item.text : '' }); 
                }
                
                $scope.onEnabledChanged = function(e){
                    $scope.eventLog.unshift({ name: "enabledChanged", info: " event was fired when Menu becomes enabled or disabled, enabled property value set to: ", value: e.enabled }); 
                }
                
                $scope.onItemClick = function(e){
                    $scope.eventLog.unshift({ name: "itemClick", info: " event was fired when menu item was clicked: ", value: e.item ? e.item.text : '' }); 
                    $scope.$apply();
                }
                
                $scope.onItemHover = function(e){
                    $scope.eventLog.unshift({ name: "itemHover", info: " event was fired when mouse cursor hovers over menu item: ", value: e.item ? e.item.text : '' }); 
                    $scope.$apply();
                }
                
                $scope.onOpen = function(e){
                    $scope.eventLog.unshift({ name: "open", info: " event was fired when sub-menu starts to open for menu item: ", value: e.item ? e.item.text : '' }); 
                }
				
			    $scope.menuEvents = {
					close: function(e){
						return $scope.onClose(e);
					},
					enabledChanged: function(e){
						return $scope.onEnabledChanged(e);
					},
					itemClick: function(e){
						return $scope.onItemClick(e);
					},
					itemHover: function(e){
						return $scope.onItemHover(e);
					},
					open: function(e){
						return $scope.onOpen(e);
					}
			    }

				$scope.clearEventLog = function(){
					$scope.eventLog.length = 0;
				}
				
				$scope.toggleEnabled = function(){
					$scope.menuEnabled = !$scope.menuEnabled;
				}
			}]);
    </script>
    <style type="text/css">
    	.control-panel
    	{
    		float: none;
            margin-left: 0;
    	}
	    .event-panel
	    {
	        width: 600px;
	    }
	    .event-block
	    {
	        width: 700px;
	        height: 200px;
	    }
	    .event-log
	    {
	        height: 168px;
	    }
	    .icons-medium
	    {
	    	margin: 0 1px;
	    }
        .iui-menu
        {
            width: 500px;
        }
        .iui-menu-item
        {
            width: 125px;
        }
        .iui-menu-item-content
        {
            margin-left: 7px;
        }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Menu / Events</h2>
	        <div class="feature-content">
                <iui-menu name="{{menuName}}" items="data" item-icon="defaultIcon" events="menuEvents" enabled="menuEnabled"></iui-menu>
                <div style="float:right;width: 100px; white-space:nowrap;margin-top:5px">
					<label><input type="checkbox" ng-click="toggleEnabled()" checked="checked" /> Enabled</label><br />
                </div>
                <div style="clear:both;height:200px"></div>
                <div class="control-panel">
                    <div class="event-block">
						<button type="button" ng-click="clearEventLog()" style="float:right;margin:3px 12px; width:50px">Clear</button>
						<p style="margin:0 10px; padding: 3px; border-bottom: thin solid #c5c5c5">Event log:</p>
                        <ul class="event-log">
                            <li ng-repeat="ev in eventLog"><span class="event-name">{{ev.name}}</span>{{ev.info}}<span class="event-value">{{ev.value}}</span></li>
						</ul>
                    </div>
                </div>
                <div class="feature-help">
                    <p><span class="initial-space"></span>This sample presents most of events that are fired from Menu directive. Depending on action, a specific event is fired, which you can handle by simple creating an event handler. Here is list of events that are supported:</p>
                     <ul class="feature-points">
                        <li><span style="color:#c60d0d">close</span> - Occurs when sub-menu is closing</li>
                        <li><span style="color:#c60d0d">enabledChanged</span> - Occurs when enabled property changes its value</li>
                        <li><span style="color:#c60d0d">itemAdding</span> - Occurs before a menu item is added</li>
                        <li><span style="color:#c60d0d">itemAdded</span> - Occurs after a menu item is added</li>
                        <li><span style="color:#c60d0d">itemClick</span> - Occurs when menu item is clicked</li>
                        <li><span style="color:#c60d0d">itemHover</span> - Occurs when mouse cursor hovers over menu item</li>
                        <li><span style="color:#c60d0d">itemRemoving</span> - Occurs before menu item is removed</li>
                        <li><span style="color:#c60d0d">itemRemoved</span> - Occurs after menu item is removed</li>
                        <li><span style="color:#c60d0d">open</span> - Occurs when sub-menu starts to open</li>
                        <li><span style="color:#c60d0d">styleChanged</span> - Occurs when control style changes</li>
                    </ul>
                    <p><span class="initial-space"></span>Depending on some conditions, when handling some of above events you can prevent the default action to proceed, by canceling the operation.</p>
                    <p><span class="initial-space"></span>In this sample event log will not register add/remove and style events, because this kind of operations are not demonstrated here.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
